<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <div class="quick-head">
          <div class="quick-aircraft">
            <img src="@/assets/images/home/quick-entry/aircraft.png" />
          </div>
          <div class="quick-word">快捷入口</div>
        </div>
      </div>
    </template>
    <div class="quick-content">
      <div class="quick-card" v-for="(item, index) in auditItems" :key="index">
        <div class="quick-card-img">
          <img :src="item.src" />
        </div>
        <div class="quick-card-word">{{ item.title }}</div>
      </div>
    </div>
  </el-card>
</template>

<script>
import draft from '@/assets/images/home/quick-entry/draft.png';
import rectification from '@/assets/images/home/quick-entry/rectification.png';
import plan from '@/assets/images/home/quick-entry/plan.png';
import report from '@/assets/images/home/quick-entry/report.png';

export default {
  data() {
    return {
      auditItems: [
        {
          title: '底稿编写',
          src: draft,
        },
        {
          title: '整改反馈',
          src: rectification,
        },
        {
          title: '计划管理',
          src: plan,
        },
        {
          title: '报告签收',
          src: report,
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
:deep(.el-card__header)  {
  padding: 15px 0 15px 18px;
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.quick-head {
  display: flex;
  .quick-aircraft {
    width: 16px;
    height: 16px;
    padding: 4px 9px 0 0;
  }
  .quick-word {
    font-size: 16px;
    font-weight: 700;
  }
}
.quick-content {
  display: flex;
  justify-content: space-around;
  margin-top: 37px;
  .quick-card {
    width: 68px;
    height: 100px;
    .quick-card-img {
      width: 68px;
      height: 68px;
    }
    .quick-card-word {
      padding-top: 13px;
      font-size: 14px;
      text-align: center;
    }
  }
}
</style>
